<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="修改用户信息"
        @click-left="$router.back()"
        left-arrow
      />
    </header>
    <div class="content setUser">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="tel"
          type="text"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          readonly
          clickable
          name="datetimePicker"
          :value="value"
          label="时间选择"
          placeholder="点击选择时间"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            @confirm="onConfirm"
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
      <van-button round block type="default" @click="exit">退出</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, DatetimePicker, Popup, Dialog } from 'vant'
import { getUserMsg } from '../../api/index.js'

import { mapMutations } from 'vuex'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(DatetimePicker)
Vue.use(Popup)
Vue.use(Dialog)

export default {
  data () {
    return {
      username: '',
      tel: '',
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      showPicker: false,
      value: ''
    }
  },
  mounted () {
    getUserMsg({
      userId: localStorage.getItem('userId')
    }).then(res => {
      console.log(res.data.data)
    })
  },
  methods: {
    ...mapMutations({
      change_isLogin: 'user/change_isLogin',
      change_token: 'user/change_token',
      change_userId: 'user/change_userId'
    }),
    onSubmit () {},
    onConfirm (val) {
      this.value = val.toLocaleDateString()
      this.showPicker = false
    },
    exit () {
      Dialog.confirm({
        message: '你真的要退出么',
        theme: 'round-button'
      }).then(() => {
        console.log('不退出了')
      }).catch(() => {
        localStorage.removeItem('userId')
        localStorage.removeItem('isLogin')
        localStorage.removeItem('token')
        this.change_token('')
        this.change_userId('')
        this.change_isLogin('')
        this.$router.push('/home')
      })
    }
  }
}
</script>

<style lang="scss">
.my{
  header{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.4rem 0;
    .userName{
      margin-left: 0.4rem;
    }
  }
}
</style>
